import React, { useState } from 'react';
import axios, { AxiosResponse } from "axios";


export default function Login() {
  const [password, setPassword] = useState("")
  const [login, setLogin] = useState("")
  const loginHandler = (e)=>{
    setLogin(e.target.value)
  }

  const passwordHandler = (e)=>{
    setPassword(e.target.value)
  }

  const click = ()=>{
    axios({
      method: 'post',
      url: '/api/auth/login',
      data: {
        login: login,
        password: password
      }
    }).then(function (response) {
     document.cookie = "token="+response.data;
      console.log(response)
      window.location.replace("/main")
    }).catch(error => {
      alert(error.response.data.detail)
   })};


    return (
      <body>
    <div class="center">
      <h1>Login</h1>
      <form method="post">
        <div class="email">
          <input class="form-control" onChange={e=>loginHandler(e)} value={login} type="email" placeholder="E-mail" aria-label="default input example" name="email" id="input_login"  required/>
          <span></span>
        </div>
        <div class="txt_field">
          <input type="password" class="form-control" onChange={e=>passwordHandler(e)} value={password} placeholder="Password" aria-label="default input example" name="password" id="input_password" required/>
          <span></span>
        </div>
        <div class="pass"> </div>
        <input type="button" onClick={()=>click()} id="button" value="Login"/>
        <div class="signup_link">
          Don't have an account? <a href="/register">Sign up</a>
        </div>
      </form>
    </div>
  </body>
    );
  }